<template>
	<div class="tabsBox">
		<div class="collapse" @click="toggle">
			<i class="iconfont icon-a-zhankaishouqi" :class="isCollapse? 'packup' : 'unfold'"></i>
		</div>
		<div class="homeIconBox" @click="homeIconClick">
			<i class="iconfont icon-shouye homeIcon" :class="{'active': activeTab === 'Home' }"></i>
		</div>
		<el-tabs v-model="activeTab" type="card" editable class="eq-tabs" closable @tab-remove="removeTab" @tab-click="tabClick">
			<el-tab-pane v-for="item in tabMenus" :key="item.name" :label="item.title" :name="item.name">
				{{ item.title }}
			</el-tab-pane>
		</el-tabs>
	</div>
</template>

<script setup>
import { storeToRefs } from 'pinia'
import { useRouter } from 'vue-router';
import { useGlobalStore } from '@/store/modules/global';
import { useTabsStore } from '@/store/modules/tabs';

const globalStore = useGlobalStore();
const tabsStore = useTabsStore();
const router = useRouter();

const { isCollapse } = storeToRefs(globalStore);
const { tabMenus, activeTab } = storeToRefs(tabsStore);

// 移除
const removeTab = (targetName) => {
    const tabs = tabMenus.value;
    
    if(targetName === activeTab.value){
        tabs.forEach((tab, index) => {
            if(tab.name === targetName){
                const nextTab = tabs[index + 1] || tabs[index - 1];
                nextTab && tabsStore.setActiveTab(nextTab['name']);
                nextTab && router.push(nextTab['path']);
            }
        });
    }
    
    const filterTabs = tabMenus.value.filter(item => item.name !== targetName);
    tabsStore.setTabMenus(filterTabs);
};

const toggle = () => {
	globalStore.toggleIsCollapse();
};

const tabClick = (tab) => {
    const tabs = tabMenus.value;
    const name = tab.props.name;
    const target = tabs.find(tab => tab.name === name);
    target && router.push(target.path);
};

const homeIconClick = () => {
    tabsStore.setActiveTab('Home');
    router.push('/home');
};

</script>

<style lang="scss">
.eq-tabs {
    width: calc(100% - 100px);
	.el-tabs__header {
		margin: 0px;
		border: none;
		.el-tabs__nav {
			border: none;
		}
		.el-tabs__item {
			color: var(--eq-font-color);
			border: none;
			padding: 0px 10px;
		}
		.el-tabs__item{
            padding: 0px!important;
            padding-left: 10px!important;
            &:hover{
                padding-left: 10px!important;
                color: var(--eq-module-color);
            }
        }
        .el-tabs__item .is-icon-close {
            border-radius: 50%;
            text-align: center;
            transition: all 0s;
            margin-left: 5px;
            margin-top: 2px;
        }
        .el-tabs__item .is-icon-close:hover{
            background: none;
            color: var(--eq-module-color);
        }
		.el-tabs__item.is-active {
			border: none;
			color: var(--eq-font-hover-color);
		}
		.el-tabs__item.is-closable {
		    .el-icon{
		        width: 14px;
		    }
		}
		.el-tabs__new-tab {
			display: none;
		}
	}
	.el-tabs__content {
		display: none;
	}
}
</style>

<style lang="scss" scoped>
@import "./Tabs.scss";
</style>